.body-box {
    width: 100%;
    height: 90vh;
    margin-left: 1vw;
    margin-top: 0.5vh;
}

.body {
    display: flex;
    justify-content: space-between;

    .not-map {
        display: flex;
        justify-content: space-around;
        height: 90vh;

        .body-left {
            width: 50%;
            height: 96%;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: stretch;

            .left-no-general {
                border: 1px solid black;
                border-radius: 3px;
                padding: 10px 5px;
                box-sizing: border-box;
            }

            .left-no1 {
                height: 28%;
                display: flex;
                flex-direction: column;
                align-content: flex-start;
                justify-content: space-between;
                .left-no1-2{
                    height: 68%;
                    padding: 0 20px;
                }
            }

            .left-no2 {
                height: 68%;
            }
        }

        .body-middle {
            box-sizing: border-box;
            width: 47%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: stretch;

            .body-middle-general {
                border: 1px solid black;
                border-radius: 3px;
                padding: 10px 5px;
                box-sizing: border-box;
            }

            .body-middle-no1 {
                width: 100%;
                height: 35vh;
            }

            .body-middle-no2-box {
                width: 38vw;
                display: flex;
                justify-content: space-between;
                align-items: stretch;

                .body-middle-no2 {
                    width: 16.5vw;
                    height: 48vh;
                }
            }
        }
    }

    .body-map {
        width: 7%;
        height: 86vh;
        border: 1px solid black;
        margin-bottom: 28px;
        position: relative;
        transition: 0.5s width ease;
        transform-origin: right; 
        .show-img {
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .show-open {
            width: 45px;
            height: 30px;
            border-radius: 25px;
            text-align: center;
            line-height: 30px;
            z-index: 2;
            border: 1px solid black;
            position: absolute;
            top: 50%;
            right: 20px;
            margin: 0;
            padding: 0;
            background-color: #fff;
            cursor: pointer;
            transition: 0.5s ease;
            opacity: 0.5;

            h3 {
                margin: 0;
                color: #909399;
            }

        }

        .show-open:hover {
            opacity: 0.3;
        }

        .show-close {
            display: none;
            z-index: 2;
            border: 1px solid black;
            border-radius: 2px;
            background-color: #fff;
            width: 140px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            top: 20px;
            right: 20px;
            transition: 0.5s ease;
            cursor: pointer;
            opacity: 0.5;
            select{
                width: 100%;
                height: 100%;
            }
            select:focus{
                outline: none;
            }
        }

        .show-close:hover {
            opacity: 0.3;
        }
    }
}

/* 高斯模糊 */
.blurred {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.div-color {
    display: inline-block;
    background-color: skyblue;
    width: 0.2rem;
    height: 0.5rem;
}

.mess-apan{
    position: relative;
    bottom: 0.1rem;
    margin-left: 0.1rem;
    font-size: 0.4rem;
}